// 数据集-预览数据
import React, { RefObject } from 'react';
import { RouteComponentProps } from 'react-router';
import styles from './index.module.scss';
import { Button, Col, Row, Table, } from 'antd';
import DragTree from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/Drag/DragTree';
import { getDataSetInfoPage } from 'src/services/DataManage';

interface IProps {
	location: any;
	match: {
		params: {
			id: string;
		}
	}
}

class DataSetView extends React.Component<RouteComponentProps & IProps> {
	state = {
		pageId: this.props.match.params.id,
		pageIndex: 1,
		pageSize: 10,
		total: 0,
		dataList: [],
		columns: [],
		// DragTree 配置
		config: {
			key: 'dataSetView',
			data: {
				tableCode: null,
			},
			currentType: 'dataSetView',
		},
	};

	modalRef: RefObject<any> = React.createRef();

	updateTableCode = () => {};

	setCurrentReault = () => {};

	backPage = () => {
		let data = this.props.location.state || {};
		const folderId = data.parentId;
		this.props.history.push( {
			pathname: '/dataManage/dataSet',
			state: {
				id: folderId,
			}
		} );
	};

	// 获取表数据
	getDataPage = async () => {
		const param = {
			page: this.state.pageIndex,
			size: this.state.pageSize,
			// tableDesc: this.state.config.data.tableCode,
			id: this.state.pageId,
		};
		const res = await getDataSetInfoPage( param );
		if ( res.data.success ) {
			// console.log( '========', res.data.data );
			let data = res.data.data;
			this.setState( {
				total: data.total,
				dataList: data.rows.map( ( item, index ) => {
					return { ...item, row_id: `${param.page}${index}` };
				} ),
			} );
			this.setColumns( data.rows );
		}
	};

	// 翻页
	handlePageChange = ( pageNumber:Number ) => {
		this.setState( {
			pageIndex: pageNumber
		}, () => {
			this.getDataPage();
		} );
	};

	// 设置pageSize
	setPageSize = ( size:Number ) => {
		this.setState( {
			pageIndex: 0,
			pageSize: size,
		}, () => {
			this.getDataPage();
		} );
	};

	// 设置columns
	setColumns = ( rows ) => {
		if ( rows.length ) {
			let columns = [];
			columns.push( {
				title: '序号',
				width: 50,
				align: 'center',
				render: ( text, record, index ) => `${ index + 1 }`
			} );
			for ( let p in rows[0] ) {
				columns.push( {
					title: p,
					dataIndex: p,
					width: 100,
				} );
			}
			this.setState( { columns } );
		}
	};

	componentDidMount() {
		let data = this.props.location.state || {};
		let config = JSON.parse( JSON.stringify( this.state.config ) );
		config.data.tableCode = data.code;
		this.setState( { config }, () => {
			this.getDataPage();
		} );
	}

	render() {
		return (
			<div className={ styles.page } style={ { display: 'flex' } } >
				<div className={ styles.side }>
					{
						this.state.config.data.tableCode && (
							<DragTree
								config={ this.state.config }
								pageId={ this.state.pageId }
								isDataResource="Y"
								currentType={ this.state.config.currentType }
								onValueChange={ this.updateTableCode }
								setCurrentReault={ this.setCurrentReault }
								selectDisabled={ true }
							></DragTree>
						)
					}
				</div>
				<div className={ styles.content }>
					<Row>
						<Col span={ 14 }>
							<h3 className={ styles.title }>预览数据</h3>
						</Col>
						<Col span={ 10 } style={ { textAlign: 'right' } } >
							<Button type="primary" onClick={ this.backPage }>返回</Button>
						</Col>
					</Row>
					<Table
						scroll={ { x: '120%' } }
						tableLayout='fixed'
						columns={ this.state.columns }
						dataSource={ this.state.dataList }
						className={ styles.tableMargin }
						bordered={ true }
						rowKey={ ( row ) => row.row_id }
						size='middle'
						pagination={ {
							showSizeChanger: true,
							pageSize: this.state.pageSize,
							onChange: this.handlePageChange,
							total: this.state.total,
							onShowSizeChange: ( current, size ) => this.setPageSize( size ),
							showTotal: total => `共 ${ total } 条`,
						} }
					/>
				</div>
			</div>
		);
	}
}

export default DataSetView;
